<template>
  <h1>Descriptions 描述组件</h1>
  <p>一种以表格形态展现数据的形式。本组件使用div开发，不同于el-description。</p>

  <h2>基础用法</h2>
  <p>数据与布局通过 rows 定义，默认无边框。</p>
  <!-- prettier-ignore -->
  <CodeDemo>
    <descriptions :rows="rows"></descriptions>

    <template #code>
      {{ `
<template>
  <descriptions :rows="rows"></descriptions>
</template>

<script setup>
const rows = [
  [
    { label: '公司名称：', value: 'xxx公司' },
    { label: '成立日期：', value: '2020-10-10' },
  ],
  [
    { label: '注册资本：', value: '500万元' },
    { label: '企业类型：', value: '私企' },
  ],
]
</script>
      ` }}
    </template>
  </CodeDemo>

  <h2>增加边框</h2>
  <p>配置 border 属性即可。</p>
  <!-- prettier-ignore -->
  <CodeDemo>
    <descriptions border :rows="rows"></descriptions>

    <template #code>
      {{ `
<template>
  <descriptions border :rows="rows"></descriptions>
</template>
      ` }}
    </template>
  </CodeDemo>

  <h2>自定义 label 和 value 的样式</h2>
  <p>
    可以使用 labelStyle、valueStyle
    进行一定的样式调整。如果要对样式、宽度进行更多的调整，可以使用 :deep()。
  </p>
  <!-- prettier-ignore -->
  <CodeDemo>
    <descriptions
      :rows="rows"
      :labelStyle="{ width: '235px', backgroundColor: '#fe0' }"
      :valueStyle="{ textAlign: 'center' }"
    ></descriptions>

    <template #code>
      {{ `
<descriptions
  :rows="rows"
  :labelStyle="{ width: '235px' }"
  :valueStyle="{ textAlign: 'center' }"
></descriptions>
      ` }}
    </template>
  </CodeDemo>

  <h2>自定义值模板</h2>
  <p>
    可以通过 rows 中的 formatter 格式化值内容，也可以通过 rows 的 valueSlot
    自定义值模板。
  </p>
  <!-- prettier-ignore -->
  <CodeDemo>
    <descriptions :rows="rows2">
      <template #amountSlot>
        我已经被 valueSlot 格式化
      </template>
    </descriptions>

    <template #code>
      {{ `
<template>
  <descriptions :rows="rows2">
    <template #amountSlot>
      我已经被 valueSlot 格式化
    </template>
  </descriptions>
</template>

<script setup>
const rows2 = [
  [
    { label: '公司名称：', value: 'xxx公司', formatter: (value) => '我已经被 formatter 格式化' },
    { label: '成立日期：', value: '2020-10-10' },
  ],
  [
    { label: '注册资本：', value: '500万元', valueSlot: 'amountSlot' },
  ],
]
</script>
      ` }}
    </template>
  </CodeDemo>

  <h2>数据与布局分离</h2>

  <p>数据放在单独的 data 对象中，rows 中的字段需要有 prop。</p>
  <!-- prettier-ignore -->
  <CodeDemo>
    <descriptions :data="data" :rows="rows3"></descriptions>

    <template #code>
      {{ `
<template>
  <descriptions :data="data" :rows="rows3"></descriptions>
</template>

<script setup>
const data = {
  company: 'xxx公司',
  date: '2020-10-10',
  amount: '500万元',
}

const rows3 = [
  [
    { label: '公司名称：', prop: 'company' },
    { label: '成立日期：', prop: 'date' },
  ],
  [{ label: '注册资本：', prop: 'amount' }],
]
</script>
      ` }}
    </template>
  </CodeDemo>

  <h2>Attributes</h2>
  <table-info type="props" :data="descProps"></table-info>
</template>

<script setup>
// const data = {
//   regAuthority: '登记机关',
//   announcementTerm: '',
//   objectionApplyPerson: '异议申请人',
//   objectionDate: '异议时间',
//   objectionContent: '',
//   briefCancelResult: '简易注销结果',
//   announcementApplyDate: '公告申请日期',
// }

const rows = [
  [
    { label: '公司名称：', value: 'xxx公司' },
    { label: '成立日期：', value: '2020-10-10' },
  ],
  [{ label: '注册资本：', value: '500万元' }],
]

// prettier-ignore
const rows2 = [
  [
    { label: '公司名称：', value: 'xxx公司', formatter: (value) => '我已经被 formatter 格式化' },
    { label: '成立日期：', value: '2020-10-10' },
  ],
  [
    { label: '注册资本：', value: '500万元', valueSlot: 'amountSlot' },
  ],
]

const data = {
  company: 'xxx公司',
  date: '2020-10-10',
  amount: '500万元',
}

const rows3 = [
  [
    { label: '公司名称：', prop: 'company' },
    { label: '成立日期：', prop: 'date' },
  ],
  [{ label: '注册资本：', prop: 'amount' }],
]

// const rows2 = [
//   [{ label: '登记机关', prop: 'regAuthority', valueSlot: 'regAuthority' }],
//   [{ label: '公告期', prop: 'announcementTerm' }],
//   [{ label: '异议申请人', prop: 'objectionApplyPerson' }],
//   [{ label: '异议时间', prop: 'objectionDate' }],
//   [
//     {
//       label: '异议内容',
//       prop: 'objectionContent',
//       formatter: (value) => value || '我这里是formatter的内容哦',
//     },
//   ],
//   [{ label: '简易注销结果', prop: 'briefCancelResult' }],
//   [{ label: '公告申请日期', prop: 'announcementApplyDate' }],
// ]

// const rows3 = [
//   [{ label: '登记机关', prop: 'regAuthority' }],
//   [
//     { label: '公告期', prop: 'announcementTerm' },
//     { label: '异议申请人', prop: 'objectionApplyPerson' },
//   ],
//   [{ label: '异议时间', prop: 'objectionDate' }],
//   [
//     { label: '异议内容', prop: 'objectionContent' },
//     { label: '简易注销结果', prop: 'briefCancelResult' },
//     { label: '公告申请日期', prop: 'announcementApplyDate' },
//   ],
// ]

// prettier-ignore
const descProps = [
  { name: 'rows', desc: '布局配置', type: 'Array<Array<{ label: string, prop?: string, value?: string, formatter?: Function, labelSlot?: string, valueSlot?: string }>>' },
  { name: 'data', desc: '数据对象', type: 'Object' },
  { name: 'border', desc: '是否显示边框', type: 'boolean' },
  { name: 'labelStyle', desc: '用于覆盖字段名的样式', type: 'Object' },
  { name: 'valueStyle', desc: '用于覆盖字段值的样式', type: 'Object' },
]
</script>
